<template>
    <div>
        <Modal v-model="selectSwitch" width="800">
            <p slot="header" style="text-align:center">
                <span>选择商圈</span>
            </p>
            <div class="disFlex Flex-middle search">
                <Input v-model="searchVal" search size="large" enter-button="搜索" placeholder="请输入商圈名称" @on-search="init(1,searchVal)" />
            </div>
            <div class="adaptiveContainer"> 
                <Table :columns="columnsData" :loading="loading" :data="shopCircleList.area" height="400"></Table>
            </div>
            <Row class="pageContainer" type="flex" justify="center">
                <Col>
                    <Page :total="allPage*20" :page-size="20" show-elevator @on-change="changePageFn" />
                </Col>
            </Row>
            <div class="disFlex Flex-center" slot="footer">
                <Button size="large" type="primary" @click="commitCircleFn">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<style scoped lang="less">
    /*搜索*/
    .search {
        padding: 15px 0;
        box-sizing: border-box;
        background: #fff;
    }

    /*搜索下拉*/
    .search-select {
        width: 20%;
        margin-right: 15px;
    }

    /*搜索输入框*/
    .search-input {
        margin-right: 15px;
    }

    /*搜索确定按钮*/
    .search-button{
        width: 7%;
    }

    /*分页*/
    .pageContainer {
        padding: 16px 0 0;
        background: #fff;
    }
</style>

<script>
    import {shopCircleList} from 'api/shop'
    export default {
        props: {
            
        },
        data () {
            return {
                // 弹窗开关
                selectSwitch: false,

                // 表格加载开关
                loading: true,

                // 搜索值
                searchVal: '',

                columnsData: [
                    {
                        title: '商圈ID',
                        width: 100,
                        render: (h, params) => {
                            return h('span', params.row.area_id);
                        } 
                    },
                    {
                        title: '商圈名称',
                        align: 'center',
                        render: (h, params) => {
                            return h('span', params.row.area_title);
                        }
                    },
                    {
                        title: '操作',
                        width: 100,
                        align: 'center',
                        render: (h, params) => {
                            let hasSelectIndex = this.hasSelectArray.findIndex(item => item.area_id == params.row.area_id)
                            let _str,_type;
                            if(hasSelectIndex < 0){
                                _str = '选择'
                                _type = 'primary'
                            }else{
                                _str = '取消'
                                _type = 'default'
                            }
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: _type,
                                        size: 'large'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            if(hasSelectIndex < 0){
                                                // 限制单选
                                                if(this.hasSelectArray.length < 1) {
                                                    this.hasSelectArray.push(this.shopCircleList.area[params.index])
                                                }else { 
                                                    this.hasSelectArray.splice(0,1,this.shopCircleList.area[params.index])
                                                }
                                            }else {
                                                this.hasSelectArray.splice(0,1)
                                            }
                                        }
                                    }
                                }, _str)
                            ]);
                        }
                    }
                ],
                shopCircleList: [],

                // 已选
                hasSelectArray: [],

                // 总页数
                allPage: 1,

                // 回调下标
                commitIndex: 0,
            }
        },
        computed:{
        },
        mounted(){
            // 初始化
            this.init(1,this.searchVal)
        },
        methods: {
            // 获取数据
            init(_page,_searchKeyword){
                // 开启表格加载
                this.loading = true

                // 请求参数
                let params = {
                    page: _page,
                    search: _searchKeyword,
                }

                shopCircleList(params).then(_data => {
                    this.shopCircleList = _data.data

                    // 重置滚动条
                    document.getElementsByClassName("ivu-table-body")[0].scrollTop = 0

                    if(_page){
                        this.allPage = _data.data.pages
                    }

                    // 结束过度动画
                    this.$nextTick(() => {
                        this.loading = false
                    })

                }).catch(_err => {
                    console.log(_err)
                })
            },

            // 切换分页
            changePageFn(_page){
                this.init(_page,this.searchVal)
            },

            // 提交
            commitCircleFn(){
                this.$emit('commitCircleFn', JSON.parse(JSON.stringify(this.hasSelectArray[0] || '')),this.commitIndex)
                this.selectSwitch = false
            },

            // 打开
            openFn(_obj,_index){
                this.hasSelectArray.splice(0,this.hasSelectArray.length,JSON.parse(JSON.stringify(_obj)))
                this.commitIndex = _index 
                this.selectSwitch = true
            }
        }
    }
</script> 